<template>
  <div class="component-container">
    <div class="padding-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- <el-tab-pane
          :label="'未分配案件(' + count_stats[1] + ')'"
          name="1"
        ></el-tab-pane> -->
        <el-tab-pane
          :label="'未处理案件(' + count_stats[2] + ')'"
          name="2"
        ></el-tab-pane>
        <!-- <el-tab-pane
          :label="'处理中案件(' + count_stats[3] + ')'"
          name="3"
        ></el-tab-pane>
        <el-tab-pane
          :label="'审核中案件(' + count_stats[4] + ')'"
          name="4"
        ></el-tab-pane>
        <el-tab-pane
          :label="'审核未通过案件(' + count_stats[5] + ')'"
          name="5"
        ></el-tab-pane> -->
        <el-tab-pane
          :label="'已关闭案件(' + count_stats[6] + ')'"
          name="6"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="filter-container">
      <el-select
        size="small"
        clearable
        placeholder="请选择来源"
        class="filter-item"
        v-model="type"
      >
        <el-option
          v-for="(label, i) in sources"
          :key="i"
          :label="label"
          :value="i"
        ></el-option>
      </el-select>

      <el-date-picker
        v-model="dateRange"
        type="daterange"
        size="small"
        align="left"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="filter-item"
        value-format="yyyy-MM-dd"
        style="width: 360px;"
      ></el-date-picker>

      <el-input
        v-model="keyword"
        size="medium"
        class="filter-item"
        placeholder="请输入关键词"
        style="width: 360px;"
      ></el-input>

      <el-button
        @click="handleQuery"
        type="primary"
        size="small"
        class="filter-item"
        ref="btnQuery"
        >查询</el-button
      >
      <el-button
        @click="handleClear"
        size="small"
        class="filter-item"
        ref="btnRefresh"
        >清空</el-button
      >
    </div>
    <!-- <TitleContainer v-on:add="handleCreate" title="手动创建"></TitleContainer> -->
    <el-table
      :data="list"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
      fit
      style="width:100%"
      border
    >
      <!-- <el-table-column type="selection" :selectable="getSelectable" width="55"></el-table-column> -->
      <!-- <el-table-column label="apply_risk_ID" prop="apply_risk_id" align="center" width="100px"></el-table-column> -->
      <el-table-column
        label="案件ID"
        prop="apply_risk_id"
        align="center"
      ></el-table-column>
      <el-table-column
        label="标题"
        prop="rule_name"
        align="center"
      ></el-table-column>
      <el-table-column
        label="描述"
        prop="message"
        align="center"
        width="500"
      ></el-table-column>
      <!-- <el-table-column label="用户名" prop="individual_name" align="left"></el-table-column> -->
      <!-- <el-table-column label="用户ID" prop="apply_risk_individual_id" align="left"></el-table-column> -->
      <!-- <el-table-column label="类别" prop="trigger_type" align="left"></el-table-column> -->
      <el-table-column
        label="来源"
        prop="source"
        align="center"
        :formatter="source_text"
      ></el-table-column>
      <el-table-column
        label="跟进策略"
        prop="deal_recommend"
        align="center"
        :formatter="deal_recommend_text"
      ></el-table-column>
      <el-table-column
        label="创建时间"
        prop="create_time"
        align="center"
        width="160"
      ></el-table-column>
      <!-- <el-table-column label="授信结果" align="center" width="160">
        <template slot-scope="scope">
          {{getverifyResult(scope.row)}}
        </template>
      </el-table-column> -->
      <el-table-column label="详情" align="center" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleDetail(scope.row)">
            详情
          </el-button>
          <!-- <el-button type="text" size="mini" @click="dispatch()">
            分配
          </el-button> -->
        </template>
      </el-table-column>
      <!-- <el-table-column label="审批操作" align="center" width="180">
        <template slot-scope="scope">
          <el-dropdown split-button size="small">
            {{getVerifyStatus(scope.row.operate, scope.row.apply_risk_result)}}
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="handleVerifyChange(scope.row.apply_risk_id,1)"
                :disabled="scope.row.operate !== '0' || scope.row.apply_risk_result == 'refuse'"
                command="1"
              >通过</el-dropdown-item>
              <el-dropdown-item
                @click.native="handleVerifyChange(scope.row.apply_risk_id,2)"
                :disabled="scope.row.operate !== '0' || scope.row.apply_risk_result == 'refuse'"
                command="2"
              >拒绝</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="pagination-container">
      <!-- <el-dropdown split-button size="small" type="primary" @command="editBatch">
        批量操作
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="1">通过</el-dropdown-item>
          <el-dropdown-item :command="2">拒绝</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="current_page"
        :page-sizes="[10, 20, 30]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <item-dispatch ref="ItemDispatch" @close="handleClose"></item-dispatch>
    <item-detail ref="ItemDetail" @close="handleModify"></item-detail>
    <item-create ref="ItemCreate" @close="handleModify"></item-create>
  </div>
</template>
<script>
import TitleContainer from '@/components/title/TitleContainer'
import ItemDetail from './cases/detail.vue'
import ItemDispatch from './cases/dispatch.vue'
import ItemCreate from './cases/create.vue'
import { getCasesList } from '@/api/risksystem/riskWarning/caseManagement/index'

export default {
  components: {
    ItemDispatch,
    ItemDetail,
    ItemCreate
    // TitleContainer
  },
  data() {
    return {
      activeName: '2',
      type: '',
      keyword: '',
      dateRange: [],
      visible: false,
      limit: 20,
      current_page: 1,
      total: 0,
      tableLoading: false,
      list: [],
      options: [
        { label: '全部', value: '' },
        { label: '进件', value: 1 },
        { label: '提现', value: 2 },
        { label: '定时', value: 3 }
      ],
      sources: {
        0: '策略生成',
        1: '手动创建'
      },
      deal_recommends: {
        1: '电询'
      },
      tags: {
        1: '高危个人',
        2: '账户盗用',
        3: '账户盗用',
        4: '策略误判'
      },
      multipleSelection: [],
      count_stats: [0, 0, 0, 0, 0, 0, 0]
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    handleClick() {
      this.fetchList()
    },
    handleModify() {
      this.fetchList()
    },
    handleQuery() {
      this.fetchList()
    },
    // 跳转页码查询
    handleCurrentChange(val) {
      console.log(val)
      this.limit = val
      this.fetchList()
    },
    // size切换查询
    handleSizeChange(val) {
      console.log(val)
      this.current_page = val
      this.fetchList()
    },
    handleClear() {
      this.dateRange = []
      this.type = ''
      this.keyword = ''
    },
    fetchList() {
      this.tableLoading = true
      getCasesList({
        search: {
          status: this.activeName,
          keyword: this.keyword,
          type: this.type,
          current_page: this.current_page,
          start: this.dateRange[0],
          end: this.dateRange[1],
          limit: 20
        }
      }).then(({ data }) => {
        this.total = Number(data.count)
        this.list = data.list
        this.count_stats = data.count_stats
      })
    },
    source_text(row, column, cellValue, index) {
      console.log(cellValue)
      return this.sources[cellValue]
    },
    deal_recommend_text(row, column, cellValue, index) {
      // console.log(cellValue);
      return this.deal_recommends[cellValue]
    },
    dispatch() {
      this.$refs.ItemDispatch.show(this.item)
    },
    handleClose() {
      console.log('close')
      this.visible = false
    },
    editBatch(command) {
      let ids = this.multipleSelection.join(',')
      if (ids === '') return this.$message.error('请先选择要审批的选项')
      let _this = this
      let confirmText = ''
      if (command === 1) {
        confirmText = '是否审批为通过'
      } else if (command === 2) {
        confirmText = '是否审批为拒绝'
      }

      this.$confirm(confirmText, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        callback(item) {
          // if (item === 'cancel') return
          // _this.$api.alarm
          //   .approvalEdit({
          //     data: {
          //       ids,
          //       status: command
          //     }
          //   })
          //   .then(res => {
          //     _this.fetchList()
          //     _this.$message(res.data.data.message)
          //   })
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = []
      val.forEach(item => {
        this.multipleSelection.push(item.apply_risk_id)
      })
    },
    handleVerifyChange(rowId, val) {
      let _this = this
      let confirmText = ''
      if (val === 1) {
        confirmText = '是否审批为通过'
      } else if (val === 2) {
        confirmText = '是否审批为拒绝'
      }
      this.$confirm(confirmText, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        callback(item) {
          // if (item === 'cancel') return
          // _this.$api.alarm
          //   .approvalEdit({
          //     data: {
          //       ids: rowId,
          //       status: val
          //     }
          //   })
          //   .then(res => {
          //     _this.fetchList()
          //     _this.$message(res.data.data.message)
          //   })
        }
      })
    },
    getVerifyStatus(val, status) {
      if (status === 'refuse') {
        return '拒绝'
      }
      switch (val) {
        case '1':
          return '通过'
        case '2':
          return '拒绝'
        default:
          return '未操作'
      }
    },
    getverifyResult(item) {
      if (item.apply_risk_result === 'refuse') return '拒绝'
      return `通过，额度${item.apply_risk_amount}元，年利率${item.apply_risk_loan_rate}%`
    },
    getSelectable(item) {
      return item.operate === 0 && item.apply_risk_result === 'pass'
    },
    handleDetail(row) {
      this.$refs.ItemDetail.show(
        row,
        this.deal_recommends,
        this.tags,
        this.sources
      )
    },
    handleCreate() {
      this.$refs.ItemCreate.show(this.deal_recommends, this.tags)
    }
  },
  mounted() {
    this.fetchList()
  }
}
</script>

<style lang="scss" scoped>
.component-container {
  padding: 20px;
}
.table-container {
  margin-bottom: 20px;
}
</style>
